import {SmallAttrBarInterface} from "../../interface/GuiInterface";
import {AttrStrMap, UnitAttribute} from "../../../script/frame/dataSource/DataModel";
import * as React from "../../../script/frame/apiModel/gui/React";
import {IProps, SyncId, UISyncData, View} from "../../../script/frame/apiModel/gui/React";
import {GuiId, GuiKeys} from "../../../script/controller/model/ControllerOpt";
import Configer from "../../../script/frame/apiModel/config/Configer";
import {ResourceKey} from "../../../script/constant/ResourceConstant";
import {UIConfigKey} from "../../../script/constant/UIConfig";
import AttrShowBar from "../component/AttrShowBar";
import {ColorStr} from "../../../script/type/Type";
import {PlayerModel} from "../../../script/frame/apiModel/adapterModel/model4/PlayerModel";
import {PlayerFactory} from "../../../script/frame/PlayerFactory";
import {TextAlign} from "../../../script/frame/apiModel/adapter/adapterInterface/model1/IFrameAdapter";

export interface IProp {
    getAttr: (player: PlayerModel) => UnitAttribute;
}
export interface IState {
    attr: UnitAttribute
}

export default class SmallAttrBar extends SmallAttrBarInterface<IProp, IState> {
    constructor(props: IProps & IProp) {
        super(props);
        this.state = {
            visible: true,
            attr: new UnitAttribute()
        }
    }

    render = () => {
        const smallAttrBack = Configer.getResource(ResourceKey.smallAttrBack)
        const attackMapArr = Configer.getUIConfig(UIConfigKey.smallAttrStrMapArr) as AttrStrMap[];
        const attrTitleSize = { h: 0.04980, w: 0.07500 }
        const itemHeight = 0.02158
        const fontSize = 0.01328;
        const backSize = { w: 0.1, h: 0.179 };
        const marginT = 0.02
        const toastSize = { w: backSize.w, h: marginT };
        return <View   key={GuiKeys.smallAttrBar} style={{ backgroundImage: smallAttrBack, width: backSize.w, height: backSize.h, left: 0.16, top: 0.776 }}>
            <View   key={GuiKeys.smallAttrBarToast} style={{ width: toastSize.w, height: toastSize.h, fontAlign: TextAlign.center, fontSize, float: true, marginT: -marginT, marginL: 0 }}>详细属性[TAB]</View>
            <View   key={GuiKeys.smallAttrBarTexts} style={{ width: attrTitleSize.w, height: itemHeight, marginT: 0.035, marginL: 0.026 }}>
                <AttrShowBar   key={GuiKeys.smallAttrBarText} attr={this.state.attr} attrStrMaps={attackMapArr} width={attrTitleSize.w} height={itemHeight} fontSize={fontSize} color={ColorStr.black}  attrSize={{ h: 0.016, w: 0.045 }}></AttrShowBar>
            </View>
        </View>
    }
    openBar = () => {
        const attr = this.props.getAttr(PlayerFactory.getInstance().getLocalPlayer());
        this.setState({
            ...this.state,
            attr,
        })
    }

    getVisible = () => {
        return this.state.visible;
    }
}